<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
	<!-- Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minxmum-scale=1.0, user-scalable=no, minimal-ui">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta name="full-screen" content="yes">
	<meta name="x5-fullscreen" content="true">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<title>东湖绿道</title>
	<link rel="stylesheet" href="<?=HW_STA?>weixin/css/weuix.min.css"/>
	<link rel="stylesheet" type="text/css" href="<?=HW_STA?>weixin/css/style.css">
	<link rel="stylesheet" href="<?=HW_CSS?>AppFont/iconfont.css">
	<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
	<style>
	.rank_logo{
		color: #fff;
		position: absolute;
		right: .64rem;
		top: 0.64rem;
		font-size: 1rem;
	}
	.rank_logo img{
		height: 1.44rem;
	}
</style>
</head>
<body>
	<a class="rank-back">
		<img src="<?=HW_IMG?>back_g.png" alt="">
	</a>
	<div class="rank_logo">
		<img src="<?=HW_IMG?>logo_green.png" alt="">
	</div>

	<div class="androidShare">
		<div class="androidShare-user">
			<div class="androidShare-user__up" style="background: url('<?=(!empty($info['backimgurl']))?$info['backimgurl']:HW_IMG.'user_bg.jpg'?>'); background-size: contain;">
			</div>
			<div class="androidShare-user__down">
				<div class="androidShare-user__user">
					<div class="androidShare-user__avatar">
						<img src="<?=$info['headimgurl']?>" alt="">
					</div>
					<span class="androidShare-user__name"><?=$info['nickname']?></span>
				</div>
				<div class="androidShare-user__step">
					<div class="androidShare-user__step-header">当前步数</div>
					<div class="androidShare-user__step-detail">
						<span class="green"><?=$step['step']?></span>步
					</div>
				</div>
				<div class="androidShare-user__detail">
					<div class="androidShare-user__detail-item">
						<span>时长</span>
						<div class="data"><?=date('H:i:s',strtotime('Y-m-d')+$step['time'])?></div>
					</div>
					<div class="androidShare-user__detail-item">
						<span>距离(米)</span>
						<div class="data"><?=$step['distance']?></div>
					</div>
					<div class="androidShare-user__detail-item">
						<span>卡路里</span>
						<div class="data"><?=$step['cal']?></div>
					</div>
				</div>
				<div class="androidShare-user__rank">
					<div class="androidShare-user__rank-left">当前步数排名</div>
					<div class="androidShare-user__rank-right">
						<span class="<?=$step['sort']==1?'gold':($step['sort']==2?'silver':($step['sort']==3?'bronze':'green'))?>"><?=$step['sort']?></span>
						<?if($step['sort']<=3):?>
						<img src="<?=HW_IMG?><?=$step['sort']==1?'gold':($step['sort']==2?'silver':'bronze')?>.png" alt="" class="medal">
						<?else:?>
						<i class="iconfont grey">&nbsp;&#xe822;</i>
						<?endif;?>
					</div>
				</div>
			</div>
		</div> 
		<div class="androidShare-share">
			<div class="androidShare-share__code-img">
				<img src="<?=HW_IMG?>me.png" alt="">
			</div>
			<img src="<?=HW_IMG?>sao.png" alt="" class='sao'>
			<div class="androidShare-share__intro">
				<div>关注临平新城</div>
				<div>微信公众号</div>
				<div>查看更多运动记录</div>
			</div>
			<img src="<?=HW_IMG?>run.png" alt="" class="run">
		</div>
	</div>
</body>
<script type="text/javascript" src="<?=HW_JS?>jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="<?=HW_STA?>weui/weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="<?=HW_JS?>rem.js"></script>
<script>
	$(".rank-back").on('click',function(){
		WebViewJavascriptBridge.callHandler(
			'route', {'finish': true}, function(responseData) {
			});
	})
</script>
</html>

